<template>
    <main>
        <template v-if="cart && cart.items && cart.items.length">
            <Table>
                <template v-slot:thead>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>金额</th>
                    <th>操作</th>
                </template>
                <tr v-for="item in cart.items" :key="item.id">
                    <th>{{ item.id }}</th>
                    <td class="text-left">{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <input class="updateCount" type="number" name="count" :value="item.count" min="1"
                            @change="updateCount(item.id, item.name, $event)" />
                    </td>
                    <td>{{ item.totalPrice }}</td>
                    <td>
                        <a class="btn-link" @click="deleteCartItem(item.id)">删除</a>
                    </td>
                </tr>
            </Table>
            <ul class="footer flex-center">
                <li>购物车中共有<strong>{{ cart.totalCount }}</strong>件商品</li>
                <li>总金额<strong>{{ cart.totalPrice }}</strong>元</li>
                <li><a class="btn-link" @click="clearCart">清空购物车</a></li>
                <li><router-link class="btn-link" :to="{ name: 'OrderCreate' }">去结帐</router-link></li>
            </ul>
        </template>
        <div v-else class="flex-center h-100">
    		<router-link class="btn-link" :to="{ name: 'Home' }">亲，当前购物车为空！快跟小伙伴们去浏览商品吧！！！</router-link>
    	</div>
    </main>
</template>

<script>
    import Table from '../../components/Table.vue';
    import cartService from '../../service/CartService';

    /** 
     * 购物车
     */
    export default {
        components: {
            Table
        },
        data() {
            return {
               cart: null
            }
        },
        methods: {
            /**
             * 修改商品数量
             * @param {number} id 商品id
             * @param {string} name 商品名称
             * @param {Event} e
             */
            async updateCount(id, name, e) {
                const count = e.target.value;
                if (!confirm(`确定要将商品【${name}】的数量修改为：${count} 吗?`)) {
                    e.target.value = e.target.defaultValue;
                    return;
                }
                const result = await cartService.updateCount(id, e.target.value);
                if (result.isFail) {
                    e.target.value = e.target.defaultValue;
                    alert('修改失败');
                } else {
                    this.cart = result.data;
                }
            },
            /**
             * 清空购物车
             */
            async clearCart() {
                if (!confirm('确定要清空购物车吗?')) return;

                const result = await cartService.clearCart();
                if (result.isSuccess) {
                    this.cart = null;
                } else {
                    alert(result.message);
                }
            },
            /**
             * 从购物车删除商品
             * @param {number} id 商品id
             */
            async deleteCartItem(id) {
                const result = await cartService.deleteCartItem(id);
                if (result.isSuccess) {
                    this.cart = result.data;
                } else {
                    alert(result.message);
                }
            }
        },
        created() {
            cartService.getCart().then(cart => this.cart = cart);
        }
    }
</script>

<style lang="less" scoped>
    main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .footer {
        min-height: 10%;
        max-height: 10%;
        border-top: 1px solid;
        li {
            margin: 0 10px;
            strong {
                color: #ff0000;
                font-size: 18px;
                margin: 0 5px;
            }
        }
    }
    .updateCount {
        height: 30px;
        padding-left: 5px;
        width: 100px;
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            height: 30px;
            width: 30px;
            cursor: pointer;
            margin-left: 10px;
        }
        &:focus {
            border: 1px solid var(--color-primary);
        }
    }
</style>